<template>
  <div id="largeSreenFooter" class="footer">
    <section class="footers">
      <div class="column4">
        <div
          :class="['tradeList', { chooseList: listChange == 1 }]"
          @click="changeList"
        >
          <div class="tradeImg"></div>
          <span>区块列表</span>
        </div>
        <div
          :class="['tradeList', { chooseList: listChange == 0 }]"
          @click="changeList"
        >
          <div class="tradeImg"></div>
          <span>交易列表</span>
        </div>
        <div class="tradeNav">
          <span>{{ whatHash }}</span>
          <span>交易时间</span>
        </div>
        <div class="listData">
          <dv-scroll-board
            :config="listData"
            class="listClass"
            ref="scrollBoard"
            :key="key"
          />
        </div>
      </div>
      <div class="column5">
        <div class="tradeList">
          <div class="tradeImg"></div>
          <span>主机监控</span>
        </div>
        <div class="ip">
          <el-select
            v-model="choose.frontIp"
            placeholder="请选择"
            class="ipSelect"
            popper-class="select-option"
            :popper-append-to-body="false"
            :change='changeIp()'
          >
            <el-option
              v-for="item in nodesOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="pie">
          <div class="pieUp" ref="pieUp"></div>
          <div class="pieDown">
            <div class="lineChart" ref="line"></div>
          </div>
        </div>
      </div>
      <div class="column6">
        <div class="tradeTip">
          <div class="tradeImg"></div>
          <span>节点城市分布</span>
        </div>
        <div class="cityShow">
          <div class="city1">
            <div class="city2" ref="cityShow"></div>
          </div>
        </div>
      </div>
    </section>
    <div class="foot">
      <div class="footImg"></div>
    </div>
  </div>
</template>

<script>
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
import "@/util/china.js";
import {
  getBlockPage,
  getTransactionList,
  metricInfo,
  getFronts,
  getCityList,
} from "@/util/api";
import to from "await-to-js";
import { format, formatData } from "@/util/util.js";
export default {
  name: "largeSreenFooter",
  components: {},
  data() {
    return {
      tradeVar: null,
      cityVar: null,
      lineVar: null,
      groupId: localStorage.getItem("groupId"),
      listData: {},
      blockList: [],
      transList: [],
      listChange: 0,
      nodeId: this.$root.$route.query.nodeId || "",
      pieVar: null,
      chartParam: {
        gap: 60,
        beginDate: `${format(new Date(new Date().getTime() - 12 * 60 * 60 * 1000), "yyyy-MM-dd")}T${format(
          new Date(new Date().getTime() - 12 * 60 * 60 * 1000),
          "HH:mm:ss"
        )}`,
        endDate: `${format(new Date().getTime(), "yyyy-MM-dd")}T${format(
          new Date().getTime(),
          "HH:mm:ss"
        )}`,
        contrastBeginDate: "",
        contrastEndDate: "",
        groupId: localStorage.getItem("groupId")
          ? localStorage.getItem("groupId")
          : "1",
      },
      nodesOptions: [],
      choose: {
        frontIp: "",
      },
      geoCoordMap: {
        北京市: [116.4551, 40.2539],
        东城区: [116.418757, 39.917544],
        西城区: [116.366794, 39.915309],
        朝阳区: [116.486409, 39.921489],
        丰台区: [116.286968, 39.863642],
        石景山区: [116.195445, 39.914601],
        海淀区: [116.310316, 39.956074],
        门头沟区: [116.105381, 39.937183],
        房山区: [116.139157, 39.735535],
        通州区: [116.658603, 39.902486],
        顺义区: [116.653525, 40.128936],
        昌平区: [116.235906, 40.218085],
        大兴区: [116.338033, 39.728908],
        怀柔区: [116.637122, 40.324272],
        平谷区: [117.112335, 40.144783],
        密云区: [116.843352, 40.377362],
        延庆区: [115.985006, 40.465325],
        天津市: [117.4219, 39.4189],
        和平区: [117.195907, 39.118327],
        河东区: [117.226568, 39.122125],
        河西区: [117.217536, 39.101897],
        南开区: [117.164143, 39.120474],
        河北区: [117.201569, 39.156632],
        红桥区: [117.163301, 39.175066],
        东丽区: [117.313967, 39.087764],
        西青区: [117.122247, 39.029446],
        津南区: [117.382549, 38.989577],
        北辰区: [117.17482, 39.255555],
        武清区: [117.057959, 39.466925],
        宝坻区: [117.428094, 39.596965],
        滨海新区: [117.654173, 39.032846],
        宁河区: [117.63828, 39.358886],
        静海区: [116.925304, 38.935671],
        蓟州区: [117.407449, 40.045342],
        河北: [114.5368, 38.0431],
        山东: [117.0263, 36.6773],
        山西: [112.569, 37.8798],
        黑龙江: [126.668, 45.7479],
        吉林: [125.3322, 43.9027],
        辽宁: [123.4379, 41.8418],
        内蒙古: [111.7728, 40.8231],
        新疆: [87.6341, 43.799],
        甘肃: [103.8329, 36.0656],
        青海: [101.7867, 36.627],
        宁夏: [106.2657, 38.4783],
        四川: [104.0823, 30.6571],
        西藏: [91.12406, 29.65343],
        陕西: [108.9607, 34.27181],
        河南: [113.7597, 34.77218],
        安徽: [117.3364, 31.7398],
        江苏: [118.7693, 32.06674],
        重庆市: [106.558, 29.56914],
        万州区: [108.380246, 30.807807],
        涪陵区: [107.394905, 29.703652],
        渝中区: [106.56288, 29.556742],
        大渡口区: [106.48613, 29.481002],
        江北区: [106.532844, 29.575352],
        沙坪坝区: [106.4542, 29.541224],
        九龙坡区: [106.480989, 29.523492],
        南岸区: [106.560813, 29.523992],
        北碚区: [106.437868, 29.82543],
        綦江区: [106.651417, 29.028091],
        大足区: [105.715319, 29.700498],
        渝北区: [106.512851, 29.601451],
        巴南区: [106.519423, 29.381919],
        黔江区: [108.782577, 29.527548],
        长寿区: [107.074854, 29.833671],
        江津区: [106.253156, 29.283387],
        合川区: [106.265554, 29.990993],
        永川区: [105.894714, 29.348748],
        南川区: [107.098153, 29.156646],
        璧山区: [106.231126, 29.593581],
        铜梁区: [106.054948, 29.839944],
        潼南区: [105.841818, 30.189554],
        荣昌区: [105.594061, 29.403627],
        梁平县: [107.800034, 30.672168],
        城口县: [108.6649, 31.946293],
        丰都县: [107.73248, 29.866424],
        垫江县: [107.348692, 30.330012],
        武隆县: [107.75655, 29.32376],
        忠县: [108.037518, 30.291537],
        云阳县: [108.697698, 30.930529],
        奉节县: [109.465774, 31.019967],
        巫山县: [109.878928, 31.074843],
        巫溪县: [109.628912, 31.3966],
        石柱土家族自治县: [108.112448, 29.99853],
        秀山土家族苗族自治县: [108.996043, 28.444772],
        酉阳土家族苗族自治县: [108.767201, 28.839828],
        彭水苗族土家族自治县: [108.166551, 29.293856],
        开州区: [108.388696, 31.162529],
        湖北: [114.3481, 30.55275],
        上海: [121.4801, 31.2363],
        黄浦区: [121.490317, 31.222771],
        徐汇区: [121.43752, 31.179973],
        长宁区: [121.4222, 31.218123],
        静安区: [121.448224, 31.229003],
        普陀区: [121.392499, 31.241701],
        虹口区: [121.491832, 31.26097],
        杨浦区: [121.522797, 31.270755],
        闵行区: [121.375972, 31.111658],
        宝山区: [121.489934, 31.398896],
        嘉定区: [121.250333, 31.383524],
        浦东新区: [121.567706, 31.245944],
        金山区: [121.330736, 30.724697],
        松江区: [121.223543, 31.03047],
        青浦区: [121.113021, 31.151209],
        奉贤区: [121.458472, 30.912345],
        崇明区: [121.397516, 1.626946],
        浙江: [120.1591, 30.272553],
        云南: [102.7164, 25.052068],
        贵州: [106.7119, 26.60612],
        湖南: [112.9902, 28.11841],
        江西: [115.8227, 28.64288],
        福建: [119.3015, 26.107029],
        广东: [113.2728, 23.138577],
        广西: [108.334, 22.821439],
        海南: [110.3557, 20.0230805],
        澳门: [113.5494, 22.19295],
        香港: [114.17774, 22.28315],
        台湾: [121.51561, 25.050003],
        临沧市: [100.092612914, 23.8878061038],
        丽江市: [100.229628399, 26.8753510895],
        保山市: [99.1779956133, 25.1204891962],
        大理白族自治州: [100.223674789, 25.5968996394],
        德宏傣族景颇族自治州: [98.5894342874, 24.441239663],
        怒江傈僳族自治州: [98.8599320425, 25.8606769782],
        文山壮族苗族自治州: [104.246294318, 23.3740868504],
        昆明市: [102.714601139, 25.0491531005],
        昭通市: [103.725020656, 27.3406329636],
        普洱市: [100.98005773, 22.7887777801],
        曲靖市: [103.782538888, 25.5207581429],
        楚雄彝族自治州: [101.529382239, 25.0663556742],
        玉溪市: [102.545067892, 24.3704471344],
        红河哈尼族彝族自治州: [103.384064757, 23.3677175165],
        西双版纳傣族自治州: [100.803038275, 22.0094330022],
        迪庆藏族自治州: [99.7136815989, 27.8310294612],
        乌兰察布市: [113.112846391, 41.0223629468],
        乌海市: [106.831999097, 39.6831770068],
        兴安盟: [122.048166514, 46.0837570652],
        包头市: [109.846238532, 40.6471194257],
        呼伦贝尔市: [119.760821794, 49.2016360546],
        呼和浩特市: [111.66035052, 40.8283188731],
        巴彦淖尔市: [107.42380672, 40.7691799024],
        赤峰市: [118.930761192, 42.2971123203],
        通辽市: [122.260363263, 43.633756073],
        鄂尔多斯市: [109.993706251, 39.8164895606],
        锡林郭勒盟: [116.027339689, 43.9397048423],
        阿拉善盟: [105.695682871, 38.8430752644],
        台中市: [119.337634104, 26.0911937119],
        台北市: [114.130474436, 22.3748329286],
        台南市: [121.360525873, 38.9658447898],
        嘉义市: [114.246701335, 22.7288657203],
        高雄市: [111.590952812, 21.9464822541],
        吉林市: [126.564543989, 43.8719883344],
        四平市: [124.391382074, 43.1755247011],
        延边朝鲜族自治州: [129.485901958, 42.8964136037],
        松原市: [124.832994532, 45.1360489701],
        白城市: [122.840776679, 45.6210862752],
        白山市: [126.435797675, 41.945859397],
        辽源市: [125.133686052, 42.9233026191],
        通化市: [125.942650139, 41.7363971299],
        长春市: [125.313642427, 43.8983376071],
        乐山市: [103.760824239, 29.6009576111],
        内江市: [105.073055992, 29.5994615348],
        凉山彝族自治州: [102.259590803, 27.8923929037],
        南充市: [106.105553984, 30.8009651682],
        宜宾市: [104.633019062, 28.7696747963],
        巴中市: [106.757915842, 31.8691891592],
        广元市: [105.81968694, 32.4410401584],
        广安市: [106.635720331, 30.4639838879],
        德阳市: [104.402397818, 31.1311396527],
        成都市: [104.067923463, 30.6799428454],
        攀枝花市: [101.722423152, 26.5875712571],
        泸州市: [105.443970289, 28.8959298039],
        甘孜藏族自治州: [101.969232063, 30.0551441144],
        眉山市: [103.841429563, 30.0611150799],
        绵阳市: [104.705518975, 31.5047012581],
        自贡市: [104.776071339, 29.3591568895],
        资阳市: [104.635930302, 30.132191434],
        达州市: [107.494973447, 31.2141988589],
        遂宁市: [105.564887792, 30.5574913504],
        阿坝藏族羌族自治州: [102.228564689, 31.9057628583],
        雅安市: [103.009356466, 29.9997163371],
        中卫市: [105.196754199, 37.5211241916],
        吴忠市: [106.208254199, 37.9935610029],
        固原市: [106.285267996, 36.0215234807],
        石嘴山市: [106.379337202, 39.0202232836],
        银川市: [106.206478608, 38.5026210119],
        亳州市: [115.787928245, 33.8712105653],
        六安市: [116.505252683, 31.7555583552],
        合肥市: [117.282699092, 31.8669422607],
        安庆市: [117.058738772, 30.5378978174],
        宣城市: [118.752096311, 30.9516423543],
        宿州市: [116.988692412, 33.6367723858],
        池州市: [117.494476772, 30.6600192482],
        淮北市: [116.791447429, 33.9600233054],
        淮南市: [117.018638863, 32.6428118237],
        滁州市: [118.324570351, 32.3173505954],
        芜湖市: [118.384108423, 31.3660197875],
        蚌埠市: [117.357079866, 32.9294989067],
        铜陵市: [117.819428729, 30.9409296947],
        阜阳市: [115.820932259, 32.9012113306],
        马鞍山市: [118.515881847, 31.6885281589],
        黄山市: [118.293569632, 29.7344348562],
        东营市: [118.583926333, 37.4871211553],
        临沂市: [118.340768237, 35.0724090744],
        威海市: [122.093958366, 37.5287870813],
        德州市: [116.328161364, 37.4608259263],
        日照市: [119.507179943, 35.4202251931],
        枣庄市: [117.279305383, 34.8078830784],
        泰安市: [117.089414917, 36.1880777589],
        济南市: [117.024967066, 36.6827847272],
        济宁市: [116.600797625, 35.4021216643],
        淄博市: [118.059134278, 36.8046848542],
        滨州市: [117.968292415, 37.4053139418],
        潍坊市: [119.142633823, 36.7161148731],
        烟台市: [121.30955503, 37.5365615629],
        聊城市: [115.986869139, 36.4558285147],
        莱芜市: [117.684666912, 36.2336541336],
        菏泽市: [115.463359775, 35.2624404961],
        青岛市: [120.384428184, 36.1052149013],
        临汾市: [111.538787596, 36.0997454436],
        吕梁市: [111.143156602, 37.527316097],
        大同市: [113.290508673, 40.1137444997],
        太原市: [112.550863589, 37.890277054],
        忻州市: [112.727938829, 38.461030573],
        晋中市: [112.7385144, 37.6933615268],
        晋城市: [112.867332758, 35.4998344672],
        朔州市: [112.479927727, 39.3376719662],
        运城市: [111.006853653, 35.0388594798],
        长治市: [113.120292086, 36.2016643857],
        阳泉市: [113.569237602, 37.8695294932],
        东莞市: [113.763433991, 23.0430238154],
        中山市: [113.422060021, 22.5451775145],
        云浮市: [112.050945959, 22.9379756855],
        佛山市: [113.134025635, 23.0350948405],
        广州市: [113.307649675, 23.1200491021],
        惠州市: [114.41065808, 23.1135398524],
        揭阳市: [116.379500855, 23.5479994669],
        梅州市: [116.126403098, 24.304570606],
        汕头市: [116.728650288, 23.3839084533],
        汕尾市: [115.372924289, 22.7787305002],
        江门市: [113.078125341, 22.5751167835],
        河源市: [114.713721476, 23.7572508505],
        深圳市: [114.025973657, 22.5460535462],
        清远市: [113.040773349, 23.6984685504],
        湛江市: [110.365067263, 21.2574631038],
        潮州市: [116.630075991, 23.6618116765],
        珠海市: [113.562447026, 22.2569146461],
        肇庆市: [112.47965337, 23.0786632829],
        茂名市: [110.931245331, 21.6682257188],
        阳江市: [111.977009756, 21.8715173045],
        韶关市: [113.594461107, 24.8029603119],
        北海市: [109.122627919, 21.472718235],
        南宁市: [108.297233556, 22.8064929356],
        崇左市: [107.357322038, 22.4154552965],
        来宾市: [109.231816505, 23.7411659265],
        柳州市: [109.42240181, 24.3290533525],
        桂林市: [110.260920147, 25.262901246],
        梧州市: [111.30547195, 23.4853946367],
        河池市: [108.069947709, 24.6995207829],
        玉林市: [110.151676316, 22.6439736084],
        百色市: [106.631821404, 23.9015123679],
        贵港市: [109.613707557, 23.1033731644],
        贺州市: [111.552594179, 24.4110535471],
        钦州市: [108.638798056, 21.9733504653],
        防城港市: [108.351791153, 21.6173984705],
        乌鲁木齐市: [87.5649877411, 43.8403803472],
        伊犁哈萨克自治州: [81.2978535304, 43.9222480963],
        克孜勒苏柯尔克孜自治州: [76.1375644775, 39.7503455778],
        克拉玛依市: [84.8811801861, 45.5943310667],
        博尔塔拉蒙古自治州: [82.0524362672, 44.9136513743],
        吐鲁番地区: [89.1815948657, 42.9604700169],
        和田地区: [79.9302386372, 37.1167744927],
        哈密地区: [93.5283550928, 42.8585963324],
        喀什地区: [75.9929732675, 39.4706271887],
        塔城地区: [82.9748805837, 46.7586836297],
        昌吉回族自治州: [87.2960381257, 44.0070578985],
        自治区直辖: [85.6148993383, 42.1270009576],
        阿克苏地区: [80.2698461793, 41.1717309015],
        阿勒泰地区: [88.1379154871, 47.8397444862],
        南京市: [118.778074408, 32.0572355018],
        南通市: [120.873800951, 32.0146645408],
        宿迁市: [118.296893379, 33.9520497337],
        常州市: [119.981861013, 31.7713967447],
        徐州市: [117.188106623, 34.2715534311],
        扬州市: [119.427777551, 32.4085052546],
        无锡市: [120.305455901, 31.5700374519],
        泰州市: [119.919606016, 32.4760532748],
        淮安市: [119.030186365, 33.6065127393],
        盐城市: [120.148871818, 33.3798618771],
        苏州市: [120.619907115, 31.317987368],
        连云港市: [119.173872217, 34.601548967],
        镇江市: [119.455835405, 32.2044094436],
        上饶市: [117.955463877, 28.4576225539],
        九江市: [115.999848022, 29.7196395261],
        南昌市: [115.893527546, 28.6895780001],
        吉安市: [114.992038711, 27.1138476502],
        宜春市: [114.400038672, 27.8111298958],
        抚州市: [116.360918867, 27.9545451703],
        新余市: [114.947117417, 27.8223215586],
        景德镇市: [117.186522625, 29.3035627684],
        萍乡市: [113.859917033, 27.639544223],
        赣州市: [114.935909079, 25.8452955363],
        鹰潭市: [117.035450186, 28.2413095972],
        保定市: [115.494810169, 38.886564548],
        唐山市: [118.183450598, 39.6505309225],
        廊坊市: [116.703602223, 39.5186106251],
        张家口市: [114.89378153, 40.8111884911],
        承德市: [117.933822456, 40.9925210525],
        沧州市: [116.863806476, 38.2976153503],
        石家庄市: [114.522081844, 38.0489583146],
        秦皇岛市: [119.604367616, 39.9454615659],
        衡水市: [115.686228653, 37.7469290459],
        邢台市: [114.520486813, 37.0695311969],
        邯郸市: [114.482693932, 36.6093079285],
        三门峡市: [111.181262093, 34.7833199411],
        信阳市: [114.085490993, 32.1285823075],
        南阳市: [112.542841901, 33.0114195691],
        周口市: [114.654101942, 33.6237408181],
        商丘市: [115.641885688, 34.4385886402],
        安阳市: [114.351806508, 36.1102667222],
        平顶山市: [113.300848978, 33.7453014565],
        开封市: [114.351642118, 34.8018541758],
        新乡市: [113.912690161, 35.3072575577],
        洛阳市: [112.447524769, 34.6573678177],
        漯河市: [114.0460614, 33.5762786885],
        濮阳市: [115.026627441, 35.7532978882],
        焦作市: [113.211835885, 35.234607555],
        省直辖: [113.486804058, 34.157183768],
        许昌市: [113.83531246, 34.0267395887],
        郑州市: [113.64964385, 34.7566100641],
        驻马店市: [114.049153547, 32.9831581541],
        鹤壁市: [114.297769838, 35.7554258742],
        丽水市: [119.929575843, 28.4562995521],
        台州市: [121.440612936, 28.6682832857],
        嘉兴市: [120.760427699, 30.7739922396],
        宁波市: [121.579005973, 29.8852589659],
        杭州市: [120.219375416, 30.2592444615],
        温州市: [120.690634734, 28.002837594],
        湖州市: [120.137243163, 30.8779251557],
        绍兴市: [120.592467386, 30.0023645805],
        舟山市: [122.169872098, 30.0360103026],
        衢州市: [118.875841652, 28.9569104475],
        金华市: [119.652575704, 29.1028991054],
        三亚市: [109.522771281, 18.2577759149],
        三沙市: [112.350383075, 16.840062894],
        海口市: [110.330801848, 20.022071277],
        省直辖: [109.733755488, 19.1805008013],
        十堰市: [110.801228917, 32.6369943395],
        咸宁市: [114.300060592, 29.8806567577],
        孝感市: [113.935734392, 30.9279547842],
        宜昌市: [111.310981092, 30.732757818],
        恩施土家族苗族自治州: [109.491923304, 30.2858883166],
        武汉市: [114.316200103, 30.5810841269],
        省直辖: [112.410562192, 31.2093162501],
        荆州市: [112.241865807, 30.332590523],
        荆门市: [112.217330299, 31.0426112029],
        襄阳市: [112.250092848, 32.2291685915],
        鄂州市: [114.895594041, 30.3844393228],
        随州市: [113.379358364, 31.7178576082],
        黄冈市: [114.906618047, 30.4461089379],
        黄石市: [115.050683164, 30.2161271277],
        娄底市: [111.996396357, 27.7410733023],
        岳阳市: [113.146195519, 29.3780070755],
        常德市: [111.653718137, 29.0121488552],
        张家界市: [110.481620157, 29.1248893532],
        怀化市: [109.986958796, 27.5574829012],
        株洲市: [113.131695341, 27.8274329277],
        永州市: [111.614647686, 26.4359716468],
        湘潭市: [112.935555633, 27.835095053],
        湘西土家族苗族自治州: [109.7457458, 28.3179507937],
        益阳市: [112.366546645, 28.5880877799],
        衡阳市: [112.583818811, 26.8981644154],
        邵阳市: [111.461525404, 27.2368112449],
        郴州市: [113.037704468, 25.7822639757],
        长沙市: [112.979352788, 28.2134782309],
        无堂区划分区域: [113.557519102, 22.2041179884],
        澳门半岛: [113.566432335, 22.1950041592],
        澳门离岛: [113.557519102, 22.2041179884],
        临夏回族自治州: [103.215249178, 35.5985143488],
        兰州市: [103.823305441, 36.064225525],
        嘉峪关市: [98.2816345853, 39.8023973267],
        天水市: [105.736931623, 34.5843194189],
        定西市: [104.626637601, 35.5860562418],
        平凉市: [106.688911157, 35.55011019],
        庆阳市: [107.644227087, 35.7268007545],
        张掖市: [100.459891869, 38.939320297],
        武威市: [102.640147343, 37.9331721429],
        甘南藏族自治州: [102.917442486, 34.9922111784],
        白银市: [104.171240904, 36.5466817062],
        酒泉市: [98.5084145062, 39.7414737682],
        金昌市: [102.208126263, 38.5160717995],
        陇南市: [104.934573406, 33.3944799729],
        三明市: [117.642193934, 26.2708352794],
        南平市: [118.181882949, 26.6436264742],
        厦门市: [118.103886046, 24.4892306125],
        宁德市: [119.54208215, 26.6565274192],
        泉州市: [118.600362343, 24.901652384],
        漳州市: [117.676204679, 24.5170647798],
        福州市: [119.330221107, 26.0471254966],
        莆田市: [119.077730964, 25.4484501367],
        龙岩市: [117.017996739, 25.0786854335],
        山南地区: [91.7506438744, 29.2290269317],
        拉萨市: [91.111890896, 29.6625570621],
        日喀则地区: [88.8914855677, 29.2690232039],
        昌都地区: [97.18558158, 31.1405756319],
        林芝地区: [94.3499854582, 29.6669406258],
        那曲地区: [92.0670183689, 31.4806798301],
        阿里地区: [81.1076686895, 30.4045565883],
        六盘水市: [104.85208676, 26.5918660603],
        安顺市: [105.928269966, 26.2285945777],
        毕节市: [105.333323371, 27.4085621313],
        贵阳市: [106.709177096, 26.6299067414],
        遵义市: [106.931260316, 27.6999613771],
        铜仁市: [109.168558028, 27.6749026906],
        黔东南苗族侗族自治州: [107.985352573, 26.5839917665],
        黔南布依族苗族自治州: [107.52320511, 26.2645359974],
        黔西南布依族苗族自治州: [104.900557798, 25.0951480559],
        丹东市: [124.338543115, 40.1290228266],
        大连市: [121.593477781, 38.9487099383],
        抚顺市: [123.929819767, 41.8773038296],
        朝阳市: [120.446162703, 41.5718276679],
        本溪市: [123.77806237, 41.3258376266],
        沈阳市: [123.432790922, 41.8086447835],
        盘锦市: [122.07322781, 41.141248023],
        营口市: [122.233391371, 40.6686510665],
        葫芦岛市: [120.860757645, 40.7430298813],
        辽阳市: [123.172451205, 41.2733392656],
        铁岭市: [123.854849615, 42.2997570121],
        锦州市: [121.147748738, 41.1308788759],
        阜新市: [121.660822129, 42.0192501071],
        鞍山市: [123.007763329, 41.1187436822],
        咸阳市: [108.707509278, 34.345372996],
        商洛市: [109.934208154, 33.8739073951],
        安康市: [109.038044563, 32.70437045],
        宝鸡市: [107.170645452, 34.3640808097],
        延安市: [109.500509757, 36.6033203523],
        榆林市: [109.745925744, 38.2794392401],
        汉中市: [107.045477629, 33.0815689782],
        渭南市: [109.483932697, 34.5023579758],
        西安市: [108.953098279, 34.2777998978],
        铜川市: [108.968067013, 34.9083676964],
        果洛藏族自治州: [100.223722769, 34.4804845846],
        海东地区: [102.085206987, 36.5176101677],
        海北藏族自治州: [100.879802174, 36.9606541011],
        海南藏族自治州: [100.624066094, 36.2843638038],
        海西蒙古族藏族自治州: [97.3426254153, 37.3737990706],
        玉树藏族自治州: [97.0133161374, 33.0062399097],
        西宁市: [101.76792099, 36.640738612],
        黄南藏族自治州: [102.007600308, 35.5228515517],
        九龙: [114.173291988, 22.3072458588],
        新界: [114.146701965, 22.4274312754],
        香港岛: [114.183870524, 22.2721034276],
        七台河市: [131.019048047, 45.7750053686],
        伊春市: [128.910765978, 47.7346850751],
        佳木斯市: [130.284734586, 46.8137796047],
        双鸭山市: [131.17140174, 46.6551020625],
        哈尔滨市: [126.657716855, 45.7732246332],
        大兴安岭地区: [124.19610419, 51.991788968],
        大庆市: [125.02183973, 46.59670902],
        牡丹江市: [129.608035396, 44.5885211528],
        绥化市: [126.989094572, 46.646063927],
        鸡西市: [130.941767273, 45.3215398866],
        鹤岗市: [130.292472051, 47.3386659037],
        黑河市: [127.500830295, 50.2506900907],
        齐齐哈尔市: [123.987288942, 47.3476998134],
      },
      key: 1,
      whatHash: "区块哈希",
      renderTwo:null
    };
  },
  mounted() {
    // this.sixInit()
    this.fourReqUpdate();
    this.fiveInit();
    this.fiveReqUpdate();
    this.sixReqUpdate();
    this.pieAdapter();
    window.addEventListener("resize", this.pieAdapter);
    window.addEventListener("resize", this.cityAdapter);
    this.reRender();
  },
  destroyed() {
    window.removeEventListener("resize", this.pieAdapter);
    window.removeEventListener("resize", this.cityAdapter);
    clearInterval(this.renderTwo)
  },
  watch: {
    listChange() {
      let switchList = this.listChange == 1 ? this.transList : this.blockList;
      this.listData = {
        columnWidth: [356, 183],
        align: "left",
        fontSize: "12",
        rowNum: 7,
        oddRowBGC: "rgba(51, 113, 208, 0.15)",
        evenRowBGC: "rgba(51, 113, 208, 0.15)",
        data: switchList,
      };
    },
    $route: function () {
      this.nodeId = this.$root.$route.query.nodeId;
    },
  },
  methods: {
    async fourReqUpdate() {
      let reqData = {
        groupId: this.groupId,
        pageNumber: 1,
        pageSize: 10,
      };
      let [getBlockPageErr, getBlockPageRes] = await to(
        getBlockPage(reqData, {})
      );
      let [getTransactionListErr, getTransactionListRes] = await to(
        getTransactionList(reqData, {})
      );
      console.log(getBlockPageErr, getBlockPageRes);
      console.log(getTransactionListErr, getTransactionListRes);
      if (getBlockPageErr || getTransactionListErr) {
        console.log("fourReqError");
        return;
      } else {
        if (
          getBlockPageRes.status != 200 ||
          getTransactionListRes.status != 200
        ) {
          console.log(getBlockPageRes.data.message);
          console.log(getTransactionListRes.data.message);
          return;
        }
        let blockList = getBlockPageRes.data.data;
        let transList = getTransactionListRes.data.data;
        console.log(blockList);
        console.log(transList);
        this.blockList = blockList.map((item, index) => {
          return [item.pkHash, item.createTime];
        });
        this.transList = transList.map((item, index) => {
          return [item.transHash, item.createTime];
        });
        // this.$set(this.listData,'data',replaceData);
        this.listData = {
          columnWidth: [356, 183],
          align: "left",
          fontSize: "12",
          rowNum: 7,
          oddRowBGC: "rgba(51, 113, 208, 0.15)",
          evenRowBGC: "rgba(51, 113, 208, 0.15)",
          data: this.listChange == 1 ? this.transList : this.blockList
        };
      }
    },
    changeList() {
      this.listChange == 0
        ? ((this.listChange = 1), (this.whatHash = "交易哈希"))
        : ((this.listChange = 0), (this.whatHash = "区块哈希"));
    },
    fiveInit() {
      this.pieVar = this.$echarts.init(this.$refs.pieUp);
      this.lineVar = this.$echarts.init(this.$refs.line);
      let titleStyle = {
        fontSize: 16,
        color: "#4F94FF",
        fontFamily: "PingFang SC",
      };
      var pieOption = {
        title: [
          {
            text: "CPU",
            left: "20%",
            bottom: "10",
            textAlign: "center",
            textStyle: titleStyle,
          },
          {
            text: "内存",
            left: "50%",
            bottom: "0",
            textAlign: "center",
            textStyle: titleStyle,
          },
          {
            text: "硬盘",
            left: "80%",
            bottom: "0",
            textAlign: "center",
            textStyle: titleStyle,
          },
        ],
        // series: [
        //   {
        //     type: "pie",
        //   },
        //   {
        //     type: "pie",
        //   },
        //   {
        //     type: "pie",
        //   },
        //],
      };
      this.pieVar.setOption(pieOption);
      //  let xList = timestampList.map((item) => {
      //     return format(new Date(item).getTime(), "HH:mm:ss").substr(0, 2);
      //   });
      var lineOption = {
        // backgroundColor: "rgba(51, 113, 208, 0.3)",
        color: ["#93CC77", "#4F94FF"],
        tooltip: {
          trigger: false,
        },
        legend: {
          data: ["上行宽带", "下行宽带"],
          textStyle: {
            color: "rgba(255, 255, 255, 0.75)",
            fontSize: 12,
          },
          top: 0,
          icon: "circle",
          itemWidth: 6,
        },
        grid: {
          left: "0",
          top: "24px",
          bottom: "0",
          right: "6px",
          containLabel: true,
        },
        xAxis: {
          axisTick: {
            show: false,
          },
          type: "category",
            //data: Array.from(new Set(xList)),
            data: [0],
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.3)",
            },
          },
          axisLabel: {
            //  color: "rgba(255, 255, 255, 0.75)",
            fontSize: "12",
            fontFamily: "Noto Sans SC",
            fontWeight: "regular",
            // width:"31px",
            // height:"20px"
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.3)",
            },

            axisLabel: {
              // color: "rgba(255, 255, 255, 0.75)",
              fontSize: "12",
              fontFamily: "Noto Sans SC",
              fontWeight: "regular",
              // width:"31px",
              // height:"20px"
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.15)",
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            name: "上行宽带",
            type: "line",
            smooth: "true",
            showSymbol: false,
            data: [0],
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147,204,119, 0.2)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147,204,119, 0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          {
            name: "下行宽带",
            smooth: "true",
            type: "line",
            showSymbol: false,
            data: [0],
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(79,148,255, 0.2)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(79,148,255, 0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      this.lineVar.setOption(lineOption);
      this.lineVar.resize();
    },
    async fiveReqUpdate() {
      let [getFrontsErr, getFrontsRes] = await to(getFronts({}));
      console.log(getFrontsErr, getFrontsRes);
      if (getFrontsErr) {
        console.log("fiveGetFrontReqError");
        return;
      } else {
        if (getFrontsRes.status != 200) {
          console.log(getFrontsRes.data.message);
          return;
        }
        if (getFrontsRes.data.totalCount != 0) {
          this.nodesOptions = getFrontsRes.data.data.map((item) => {
            return {
              value: item.frontId,
              label: "节点IP：" + item.frontIp,
            };
          });
          this.$set(this.choose, "frontIp", this.nodesOptions[0].label);
          this.nodeId = this.nodesOptions[0]["value"];
        } else {
          this.$message({
            message: this.$t("monitor.addFrontInfo"),
            type: "error",
            duration: 2500,
          });
        }
      }
      var reqData = {
        nodeId: this.nodeId,
      };
      let [getHostMonitorErr, getHostMonitorRes] = await to(
        metricInfo(reqData, this.chartParam)
      );
      console.log(getHostMonitorErr, getHostMonitorRes);
      if (getHostMonitorErr) {
        console.log("fiveReqError");
        return;
      } else {
        if (getHostMonitorRes.status != 200) {
          console.log(getHostMonitorRes.data.message);
          return;
        }
        let timestampList =
          getHostMonitorRes.data.data[0]["data"]["lineDataList"][
            "timestampList"
          ];
        let pie = [0, 1, 2];
        let lastVal = pie.map((item, index) => {
          let val =
            getHostMonitorRes.data.data[index]["data"]["lineDataList"][
              "valueList"
            ].slice(-1)[0];
          return val ? val : 0;
        });
        let color = function (item) {
          if (item > 75) {
            return "#953F2D";
          }
          if (item > 50) {
            return "#9C7131";
          }
          return "#4B7AC2";
        };
        let pieList = lastVal.map((item, index) => {
          return {
            type: "pie",
            startAngle: 90,
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
              },
            },
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value: item,
                itemStyle: {
                  normal: {
                    color: color(item),
                  },
                },
                label: {
                  formatter: "{c}%",
                  position: "center",
                  show: true,
                  textStyle: {
                    fontFamily: "PingFang SC",
                    color: "#FFFFFF",
                    fontSize: "16px",
                  },
                },
              },
              {
                value: 100 - item,
                itemStyle: {
                  color: "#0B3067",
                },
                label: {
                  show: false,
                },
              },
            ],
          };
        });
        let pieOption = {
          series: pieList,
        };
        this.pieVar.setOption(pieOption);
        this.pieVar.resize();
        // if (timestampList.length == 0) {
        //   timestampList = [0];
        // }
        let xList = timestampList.map((item) => {
          return format(new Date(item).getTime(), "HH:mm:ss").substr(0, 2);
        });
        let txBps =
          getHostMonitorRes.data.data[3]["data"]["lineDataList"]["valueList"];
        if (txBps.length == 0) {
          txBps = [0];
        }
        let rxBps =
          getHostMonitorRes.data.data[4]["data"]["lineDataList"]["valueList"];
        if (rxBps.length == 0) {
          rxBps = [0];
        }
        let bpsOption = {
          xAxis: {
            data: Array.from(new Set(xList)).length==13?Array.from(new Set(xList)):['01','02','03','04','05','06','07','08','09','10','11','12'],
          },
          series: [{ data: txBps }, { data: rxBps }],
        };

        this.lineVar.setOption(bpsOption);
        this.lineVar.resize();
      }
    },
    pieAdapter() {
      let _this = this;
      setTimeout(function () {
        console.log(_this.$refs.pieUp.offsetWidth);
        let dataSize = _this.$refs.pieUp.offsetWidth / 637;
        console.log(dataSize);
        let titleStyle = {
          fontSize: 16 * dataSize,
          color: "#4F94FF",
          fontFamily: "PingFang SC",
        };
        let positions = [
          ["20%", 73.5 * dataSize],
          ["50%", 73.5 * dataSize],
          ["80%", 73.5 * dataSize],
        ];
        let pie = [0, 1, 2];
        let pieList = pie.map((item, index) => {
          return {
            type: "pie",
            center: positions[index],
            radius: [52.5 * dataSize, 47.5 * dataSize],
          };
        });
        var pieOption = {
          title: [
            {
              text: "CPU",
              left: "19.5%",
              bottom: "12%",
              textAlign: "center",
              textStyle: titleStyle,
            },
            {
              text: "内存",
              left: "49.5%",
              bottom: "12%",
              textAlign: "center",
              textStyle: titleStyle,
            },
            {
              text: "硬盘",
              left: "79.5%",
              bottom: "12%",
              textAlign: "center",
              textStyle: titleStyle,
            },
          ],
          series: pieList,
        };
        _this.pieVar.setOption(pieOption);
        _this.pieVar.resize();
        _this.lineVar.resize();
      }, 300);
    },
    sixInit() {
      this.cityVar = this.$echarts.init(this.$refs.cityShow);
      var data = [
        {
          name: "海门",
          value: 12,
        },
        {
          name: "深圳市",
          value: 30,
        },
      ];
      var geoCoordMap = {
        海门: [121.15, 31.89],
        鄂尔多斯: [109.781327, 39.608266],
      };
      function convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      }
      var option = {
        //backgroundColor: '#3371D0',
        geo: {
          top: 0,
          left: 0,
          bottom: 0,
          show: true,
          map: "china",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "map",
            map: "china",
            top: 0,
            left: 0,
            bottom: 0,
            showLegendSymbol: false, // 存在legend时显示
            tooltip: {
              show: false,
            },
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            roam: false,
            // itemStyle: {
            //   normal: {
            //     areaColor: "#081D3E",
            //     borderColor: "#3371D0",
            //     borderWidth: 1,
            //   },
            //   emphasis: {
            //     areaColor: "#3371D0",
            //   },
            // },
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            symbolSize: 10,
            // data: convertData(data),
            // 			symbolSize: function (val) {
            // 				return val[2];
            // 			},
            tooltip: {
              position: function (p) {
                //其中p为当前鼠标的位置
                return [p[0] + 20, p[1] - 37];
              },
              formatter(params) {
                console.log(params);
                let arr = [params.name, "节点数：/s", params.value[2]];
                return (
                  params.name +
                  "<br/>" +
                  '<span style="margin-top:42px; display: inline-block;">节点数：</span>' +
                  '<span style=" display: inline-block;margin-top:42px;margin-left:24px;">' +
                  params.value[2] +
                  "</span>"
                );
              },
              backgroundColor: "#9FC5FF",
              extraCssText: "width:125px;height:73px;border-radius:0",
              padding: 10,
              textStyle: {
                color: "#FFFFFF",
                fontFamily: "PingFang SC",
                fontWeight: "medium",
                fontSize: "16px",
              },
            },
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke", // 波纹绘制方式 stroke, fill
            },
            itemStyle: {
              normal: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#70A8FF",
                    },
                    {
                      offset: 0.8,
                      color: "#70A8FF",
                    },
                    {
                      offset: 1,
                      color: "#70A8FF",
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          },
        ],
      };
      this.cityVar.setOption(option);
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    },
    async sixReqUpdate() {
      let [getCityListtErr, getCityListRes] = await to(getCityList());
      console.log(getCityListtErr, getCityListRes);
      if (getCityListtErr) {
        console.log("fiveGetFrontReqError");
        return;
      } else {
        if (getCityListRes.status != 200) {
          console.log(getCityListRes.data.message);
          return;
        }
        let lastCityList = getCityListRes.data.data.map((item, index) => {
          let cityCode =
            CodeToText[item.city] == "市辖区" || CodeToText[item.city] == "县"
              ? item.city.substr(0, 3) + "000"
              : item.city;
          return { name: CodeToText[cityCode], value: item.count };
        });
        this.cityVar = this.$echarts.init(this.$refs.cityShow);
        var option = {
          geo: {
            top: 0,
            left: 0,
            bottom: 0,
            show: true,
            map: "china",
          },
          tooltip: {
            trigger: "item",
          },
          itemStyle: {
            normal: {
              areaColor: "#081D3E",
              borderColor: "#3371D0",
              borderWidth: 1,
            },
          },
          series: [
            {
              type: "map",
              map: "china",
              top: 0,
              left: 0,
              bottom: 0,
              showLegendSymbol: false, // 存在legend时显示
              tooltip: {
                show: false,
              },

              select: {
                itemStyle: {
                  areaColor: "#3371D0",
                  borderColor: "#3371D0",
                  borderWidth: 1,
                },
                label: {
                  color: "#fff",
                },
              },
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: true,
                  color: "#fff",
                },
              },
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: "#081D3E",
                  borderColor: "#3371D0",
                  borderWidth: 1,
                },
                emphasis: {
                  areaColor: "#3371D0",
                  borderColor: "#3371D0",
                  borderWidth: 1,
                  label: {
                    color: "#fff",
                  },
                },
              },
            },
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              data: this.convertData(lastCityList),
              symbol: "circle",
              symbolSize: (params) => {
                if (params[2] > 20) {
                  return 30;
                } else if (params[2] > 10) {
                  return 20;
                } else {
                  return 10;
                }
              },
              tooltip: {
                position: function (p) {
                  //其中p为当前鼠标的位置
                  return [p[0] + 20, p[1] - 37];
                },
                formatter(params) {
                  console.log(params);
                  let arr = [params.name, "节点数：/s", params.value[2]];
                  return (
                    params.name +
                    "<br/>" +
                    '<span style="margin-top:10px; display: inline-block;">节点数：</span>' +
                    '<span style=" display: inline-block;margin-top:10px;margin-left:24px;">' +
                    params.value[2] +
                    "</span>"
                  );
                },
                backgroundColor: "rgba(159,197,255, 0.15)",
                borderColor: "#3371D0",
                borderWidth: 1,
                extraCssText: "border-radius:0;border: 1px solid #3371D0;",
                padding: 10,
                textStyle: {
                  color: "#FFFFFF",
                  fontFamily: "PingFang SC",
                  fontWeight: "medium",
                  fontSize: "16px",
                },
              },
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              itemStyle: {
                normal: {
                  color: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#70A8FF",
                      },
                      {
                        offset: 0.8,
                        color: "#70A8FF",
                      },
                      {
                        offset: 1,
                        color: "#70A8FF",
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
            },
          ],
        };
        this.cityVar.setOption(option);
      }
    },
    cityAdapter() {
      let _this = this;
      setTimeout(function () {
        _this.cityVar.resize();
      }, 300);
    },
    reRender() {
      let _this = this;
    this.renderTwo=  setInterval(function () {
        _this.fourReqUpdate();
        // _this.fiveInit();
         _this.fiveReqUpdate();
        _this.sixReqUpdate();
      }, 10000);
    },
    changeIp(){

    }
  },
};
</script>

<style >
#largeSreenFooter {
  width: 100%;
  height: 7.1rem;
  background-color: #000000;
  padding: 0.725rem 0.6rem 0 0.6rem;
}
.foot {
  width: 100%;
  height: 1.25rem;

  position: relative;
}
.footImg {
  width: 100%;
  height: 0.8rem;
  position: absolute;
  background: url("../../assets/largeScreen/footer_bg.svg") no-repeat top center;
  background-size: 100% 100%;
  left: 0;
  bottom: 0.15rem;
}
.footers {
  width: 100%;
  height: 4.925rem;
  display: flex;
}
.tradeNav {
  width: 100%;
  height: 0.45rem;
  background: rgba(51, 113, 208, 0.15);
  border: 1px solid rgba(51, 113, 208, 0.5);
  margin-top: 0.3rem;
  line-height: 0.45rem;
  box-sizing: border-box;
}
.tradeNav span:nth-child(1) {
  margin-left: 0.3rem;
  color: #4f94ff;
  font-family: PingFang SC;
  font-weight: medium;
  font-size: 16px;
}
.tradeNav span:nth-child(2) {
  margin-left: 3.70625rem;
  color: #4f94ff;
  font-family: PingFang SC;
  font-weight: medium;
  font-size: 16px;
}
.pie {
  width: 7.9625rem;
  height: 4.475rem;
  margin-top: 0.3rem;
  box-sizing: border-box;
  /* background-color: red; */
  background: rgba(51, 113, 208, 0.15);
  border: 1px solid rgba(51, 113, 208, 0.5);
}
.pieUp {
  width: 7.9625rem;
  height: 2.2375rem;
  position: relative;
  overflow: hidden;
}
.pieDown {
  width: 7.9625rem;
  height: 2.2375rem;
  /* background-color: chartreuse; */
  position: relative;
  /* background: rgba(51, 113, 208, 0.3); */
}
.lineChart {
  width: 7.0875rem;
  height: 2.025rem;
  left: 0.425rem;
  top: 0;
  position: absolute;
}
.pieUp .cpu {
  width: 1.3125rem;
  height: 1.6625rem;
  position: absolute;
  left: 0.95rem;
  top: 0;
}
.pieUp .ram {
  width: 1.3125rem;
  height: 1.6625rem;
  position: absolute;
  left: 3.325rem;
  top: 0.2625rem;
}
.pieUp .disk {
  width: 1.3125rem;
  height: 1.6625rem;
  position: absolute;
  right: 0.95rem;
  top: 0.2625rem;
}
.listData {
  width: 6.7375rem;
  height: 3.9rem;
  border: 1px solid rgba(51, 113, 208, 0.5);
  margin-top: 0.125rem;
  box-sizing: border-box;
}
.listData .rows {
  width: 6.7375rem;
  height: 3.85rem !important;
}
.listData .rows .row-item {
  color: rgba(255, 255, 255, 0.75);
  font-family: PingFang SC;
  font-weight: medium;
  font-size: 12px;
  height: 0.55rem !important;
  line-height: 0.55rem !important;
  padding-left: 0.3rem;
}
.dv-scroll-board .rows .ceil {
  padding: 0;
}
.dv-scroll-board .rows .ceil:nth-child(2) {
  padding-left: 0.3rem;
}
.listClass {
  width: 100%;
  height: 3.85rem;
  box-sizing: border-box;
}
.column1 {
  /* background-color: royalblue; */
}
.column5 {
  width: 7.975rem;
  height: 4.925rem;
  /* background: url("../../assets/largeScreen/group_corner.svg") no-repeat top
    center; */
  background-size: 100% 100%;
  /* background-color: seagreen; */
  padding: 0 0.675rem;
  position: relative;
}
.column5 .data_group {
  width: 100%;
  height: 0.9375rem;
  /* background-color: red; */
  position: relative;
  display: flex;
}
.column5 .ip {
  width: 2.35rem;
  height: 0.45rem;
  position: absolute;
  top: 0;
  right: 0.6875rem;
}
.data_content {
  background: url("../../assets/largeScreen/group_bg.svg") no-repeat top center;
  background-size: 100% 100%;
  width: 7.075rem;
  height: 3.525rem;
  margin: 0.3125rem 0.45rem;
}
.leftArr {
  background: url("../../assets/largeScreen/group_previous.svg") no-repeat top
    center;
  background-size: 100% 100%;
  position: absolute;
  width: 0.1125rem;
  height: 1.1rem;
  top: calc(50% - 0.05625rem);
  left: 0.675rem;
}
.rightArr {
  background: url("../../assets/largeScreen/group_next.svg") no-repeat top
    center;
  background-size: 100% 100%;
  position: absolute;
  width: 0.1125rem;
  height: 1.1rem;
  top: calc(50% - 0.05625rem);
  right: 0.675rem;
}
.column4 {
  width: 6.7375rem;
  height: 4.925rem;
  /* background-color: rebeccapurple; */
  position: relative;
}
.column4 .tradeList {
  cursor: pointer;
}
.column4 .chooseList span {
  color: #3371d0;
}

.chooseList .tradeImg {
  background: url("../../assets/largeScreen/title_nor.svg") no-repeat top center;
  background-size: 100% 100%;
  width: 0.3rem;
  height: 0.225rem;
  vertical-align: middle;
  display: inline-block;
}
.column6 {
  width: 6.7375rem;
  height: 4.925rem;
  position: relative;
}
.tradeList {
  height: 0.35rem;
  display: inline-block;
}
.ipSelect .el-input .el-input__inner {
  width: 2.35rem;
  height: 0.45rem;
  background: rgba(51, 113, 208, 0.15);
  border: 1px solid rgba(51, 113, 208, 0.5);
  border-radius: 0;
  color: #4f94ff;
  font-family: PingFang SC;
  font-weight: medium;
  font-size: 0.2rem;
  line-height: normal;
  letter-spacing: 0px;
  text-align: left;
}
/* .ipSelect .el-input .el-input__suffix-inner .el-input__icon::before{
width: .15rem;
height: .075rem;
} */
.tradeList span {
  color: rgba(255, 255, 255, 0.75);
  font-family: PingFang SC;
  font-weight: medium;
  font-size: 0.25rem;
  line-height: normal;
  letter-spacing: 0px;
  text-align: left;
  vertical-align: middle;
}
.tradeList:nth-child(2) {
  margin-left: 0.2375rem;
}
.tradeImg {
  background: url("../../assets/largeScreen/title_sel.svg") no-repeat top center;
  background-size: 100% 100%;
  width: 0.3rem;
  height: 0.225rem;
  vertical-align: middle;
  display: inline-block;
}
.cityShow {
  width: 100%;
  height: 4.475rem;
  margin-top: 0.3rem;
  background: rgba(51, 113, 208, 0.15);
  box-sizing: border-box;
  border: 1px solid rgba(51, 113, 208, 0.5);
}
.city1 {
  width: 100%;
  height: 100%;
  position: relative;
}
.city2 {
  width: 5.4875rem;
  height: 4.05rem;
  position: absolute;
  top: 0.1875rem;
  left: 0.625rem;
}
.column1 {
  width: 6.7375rem;
  height: 4.9rem;

  /* display: flex;
    flex-wrap: wrap; */
  /* justify-content: space-around; */
  /* flex-direction: column; */
}
.ipSelect .el-input .el-select__caret {
  color: #4f94ff !important;
}
.select-option {
  margin-top: 0.025rem !important;
  background: #000000ff;
  border: 1px solid rgba(51, 113, 208, 0.5);
  border-radius:0 !important;
}
.select-option .popper__arrow {
  display: none;
}
.select-option .el-select-dropdown__item {
  height: 0.375rem;
  line-height: 0.375rem;
  padding-left: 0.15rem;
  color: #4f94ffff;
  font-family: PingFang SC;
  font-weight: medium;
  font-size: 0.175rem;
}
.select-option .hover {
  background: rgba(51, 113, 208, 0.3);
}
.select-option .el-select-dropdown__list{
  padding:0 !important;
}
.el-select .el-input.is-focus .el-input__inner {
    border-color: #409EFF !important;
}
</style>
